<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./reset.css">
    <style>
        .box {
            width: 400px;
            height: 700px;
            margin: 100px 0 0 100px;
        }

        .content {
            width: 400px;
            height: 700px;
            position: relative;
            border: 1px solid #ccc;
        }

        .content>img {
            width: 400px;
            height: 700px;
        }

        .mask {
            width: 300px;
            height: 300px;
            background-color: yellow;
            opacity: 0.5;
            position: absolute;
            top: 0;
            left: 0;
            border: 1px solid #ccc;
            display: none;
        }

        .big {
            width: 400px;
            height: 700px;
            position: absolute;
            top: 0;
            left: 410px;
            border: 1px solid #ccc;
            overflow: hidden;
            display: none;
        }

        .big>img {
            width: 600px;
            height: 800px;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="content">
            <img src="./images/1.jpg "alt="">
            <div class="mask"></div>
            <div class="big">
                <img src="./images/1.jpg" alt="">
            </div>
        </div>

    </div>
    <script>
        var content = document.querySelector('.content')
    var mask = document.querySelector('.mask');
    var big = document.querySelector('.big');
    content.addEventListener('mouseenter', function () {
        mask.style.display = 'block';
        big.style.display = 'block';
    })
    content.addEventListener('mouseleave', function () {
        console.log(1111);
        mask.style.display = 'none';
        big.style.display = 'none';
    })
    content.addEventListener('mousemove', function (e) {
        var x = e.pageX - content.offsetLeft;
        var y = e.pageY - content.offsetTop;
        var maskX = x - mask.offsetWidth / 2;
        var maskY = y - mask.offsetHeight / 2;

        console.log(mask.offsetWidth, content.offsetWidth);
        var XMAX = content.offsetWidth - mask.offsetWidth
        var YMAX = content.offsetHeight - mask.offsetHeight
        console.log(maskX, maskY, XMAX);
        if (maskX <= 0) {
            maskX = 0
        } else if (maskX >= XMAX) {
            maskX = XMAX
        }
        if (maskY <= 0) {
            maskY = 0
        } else if (maskY >= YMAX) {
            maskY = YMAX;
        };
        mask.style.left = maskX + 'px';
        mask.style.top = maskY + 'px';
        var img = document.querySelector('.big>img')
        imgXMax = img.offsetWidth - big.offsetWidth;
        imgYMax = img.offsetHeight - big.offsetHeight;
        img.style.left = -maskX * imgXMax / XMAX + 'px';
        img.style.top = -maskY * imgYMax / YMAX + 'px';
    })
    </script>
    <!-- <script src="./放大镜.js"></script> -->
</body>

</html>

